<template>
  <div class="register">
    <!-- 顶层 -->
    <van-nav-bar title="注册" style="background-color: #fafafa" left-arrow>
      <template #left>
        <van-icon name="arrow-left" size="25" color="#767a77" />
      </template>
    </van-nav-bar>
    <!-- 登陆页面中间大图 -->
    <van-image
      width="5rem"
      height="3rem"
      fit="contain"
      style="margin-left: 90px"
      src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
    />
    <!--  @submit="onSubmit" -->
    <!-- 注册用户 -->
    <van-form native-type="button" style="margin-top: 57px" ref="form">
      <van-field
        name="validator"
        placeholder="请输入手机号"
        v-model="phone"
        :rules="rulesphone"
      />
      <van-field
        name="验证码"
        placeholder="请输入验证码"
        v-model="code"
        :rules="rulescode"
        style="width: 70%; display: inline-block"
      />

      <van-button
        round
        type="info"
        color="#dd1a21"
        size="small"
        @click="getCode"
        >获取验证码</van-button
      >

      <van-field
        type="password"
        name="validator1"
        placeholder="请输入密码"
        v-model="password"
        :rules="rulespassword"
      />
      <van-field
        type="password"
        name="密码"
        placeholder="请再次确认密码"
        v-model="password2"
        :rules="rulespassword2"
      />
      <template>
        <div class="account"><span @click="toLogin">登陆</span>已有账号去</div>
      </template>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="#dd1a21"
          @click="getRegister"
          >注册账号</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      active: 0,
      phone: "18163102495", //用户名
      password: "123456a", //密码
      password2: "123456a", //确认密码
      code: "", //验证码
      // 验证手机号是否合法
      rulesphone: [
        {
          // 是否为必填
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
        },
      ],
      // 验证密码是否合法
      rulespassword: [
        {
          // 是否为必填
          required: true,
          message: "请输入密码",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$/.test(
              value
            );
          },
          message: "密码必须是数字、英文、特殊符号且必须包含数字及英文，6-18位",
          trigger: "onBlur",
        },
      ],
      // 验证密码2是否合法
      rulespassword2: [
        {
          // 是否为必填
          required: true,
          message: "请输入密码",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$/.test(
              value
            );
          },
          message: "密码必须是数字、英文、特殊符号且必须包含数字及英文，6-18位",
          trigger: "onBlur",
        },
      ],
      // 验证验证码是否合法
      rulescode: [
        {
          // 是否为必填
          required: true,
          message: "请输入验证码",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^[0-9]{6}$/.test(value);
          },
          message: "验证码必须为6位数字",
          trigger: "onBlur",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 获取验证码的逻辑
    async getCode() {
      // 要发请求拿验证码，就需要写三连环
      try {
        const result = await this.$store.dispatch("getCode", this.phone);
        this.code = result;
        if (result && this.code !== result) {
          // return Promise.reject(new Error("验证码输入错误"));
        }
      } catch (error) {
        alert("获取验证码失败" + error.message);
      }
    },
    // 注册的逻辑
    getRegister() {
      let { phone, code, password } = this;
      // 拿到表单进行整体验证
      this.$refs.form
        .validate()
        .then(async () => {
          // 进入then中代表参数正确可以发送请求
          try {
            if (this.password !== this.password2) {
              alert("两次输入的密 码不一样，请从新输入");
              return;
            }
            // 发送请求注册账号
            await this.$store.dispatch("getRegister", {
              phone,
              code,
              password,
            });
            console.log(11111111);
            // 注册成功弹出注册成功,然后跳转登陆页面
            alert("注册账号成功");
            this.$router.push("/login");
          } catch (error) {
            return Promise.reject(new Error("注册失败"));
          }
        })
        .catch(() => {
          alert("请求注册失败");
        });
    },
    // 去往登陆页面
    toLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  .account {
    margin-right: 20px;
    margin-top: 20px;
    font-size: 16px;
    color: #7f7f7f;
    display: flex;
    flex-direction: row-reverse;
    span {
      color: #dd1a21;
    }
  }
}
</style>
